<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

	<head>
		<title>The BUNNY App</title>
		
		<meta http-equiv="content-language" content="de" />

		<meta name="robots" content="index, all" />

		<meta name="description" content="Die BUNNY App ist ein Spiel für Mobile User." />
		<meta name="author" content="GTUG Karlsruhe" />
		<meta name="keywords" content="GTUG, Android, iPhone, Webkit, HTML, Map, Landkarte" />
		
		<meta http-equiv="content-type" content="text/html; charset=utf8" />
		
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		
	    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
	</head>
	
	<body>
	
		<!-- Mainframe start-->
		<div class="" style="width:920px; margin:auto;">
		
			<!-- Header start -->
			<div class="" style="width:100%; height:170px;">
				<img style="float:left;" src="images/bunnyapp_logo.jpg" alt="The BUNNY App" title="The BUNNY App" width="920" height="170" />
			</div>
			<!-- Header end -->
			
			<!-- Top Navi start -->
			<div class="" style="width:100%; height:45px;">
				<span style="padding-left:25px;"><a style="font-size:18px; font-weight:bold;" href="index.html">HOME</a></span>
				<span style="padding-left:65px;"><a style="font-size:18px; font-weight:bold;" href="app.html">START APP</a></span>
				<span style="padding-left:65px;"><a style="font-size:18px; font-weight:bold;" href="doc.html">DOCUMENTATION</a></span>
				<span style="padding-left:105px;"><a style="font-size:18px; font-weight:bold;" href="imprint.html">ABOUT</a></span>
			</div>
			<!-- Top Navi end -->
			
			<!-- MainContent start-->
			<div style="position:relative; width:100%; height:440px; border-bottom-width:1px;">
			
				<!-- videobox section start -->
				<div style="position:absolute; left:300px; top:45px; width: 600px; height:300px;">
					<img src="images/videobox.jpg" alt="BUNNY App Video" width="600" height="300" />
					<img style="position:absolute; left:350px; top:115px;" src="images/hase.gif" alt="Cooler Hase 1" />
					<img style="position:absolute; left:55px; top:185px;" src="images/hase.gif" alt="Cooler Hase 2" />
					<img style="position:absolute; left:75px; top:35px;" src="images/hase.gif" alt="Cooler Hase 3" />
					<img style="position:absolute; left:220px; top:55px;" src="images/hase.gif" alt="Cooler Hase 4" />
					<img style="position:absolute; left:485px; top:225px;" src="images/hase.gif" alt="Cooler Hase 5" />
				</div>
				<!-- videobox section end -->
				
				<!-- teaser display start -->
				<div style="position:absolute; left:-60px; top:-30px; width: 250px; height:250px; z-index:10;">
					<img src="images/teaser.png" alt="" width="250" height="250" />
					<div style="position:absolute; top:75px; left:0px; text-align:center; font-size:18px;">Du hast<br /><span style="font-size:18px; font-weight:bold;">ein BUNNY-Egg</span><br />gefunden!</div>
				</div>
				<!-- teaser display end -->
				
				<!-- iphone start -->
				<div style="position:absolute; left:55px; top:45px; width: 252px; height:300px;">
					<img src="images/iphone.png" alt="" width="252" height="300" />
				</div>
				<!-- iphone end -->
				
				<!-- description start -->
				<div style="position:absolute; left:5px; top:350px; width:900px; height:80px;">
					<p>Finde virtuelle BUNNY-Eggs in deiner N&auml;he und entdecke geheime Botschaften!
					<br />Du kannst natürlich auch selbst BUNNY-Eggs mit einer Nachricht versehen und verstecken...</p>
				</div>
				<!-- description end -->
				
				<!-- phone logos start -->
				<div style="position:absolute; left:750px; top:350px; width:200px; height:40px;">
					<a href="app.html"><img src="images/iphone_logo.jpg" alt="iPhone supported" width="89" height="50" /></a>
					<span style="margin-left:10px;"><a href="app.html"><img src="images/android_logo.jpg" alt="Android supported" width="40" height="50" /></a></span>
				</div>
				<!-- phone logos end -->
			
			</div>
			<!-- MainContent end -->
			
			<!-- Footer start-->
			<div style="position:relative; width:100%; height:80px;">
				<!-- GTUG Logo start -->
				<div style="position:absolute; top:0px; right:0px; width:100%; margin-top:5px; text-align:right;">
					<span style="font-size:10px; margin-right:10px;">&copy; 2010 GTUG Karlsruhe</span>
					<img style="float:right;" src="images/gtug_logo.png" alt="GTUG Karlsruhe" width="50" height="20" />
				</div>
				<!-- GTUG Logo end -->
			</div>
			<!-- Footer end -->
		</div>
		<!-- Mainframe end -->
	
	</body>
	
</html>